<template id="InviteCode">
  <div class="InviteCode">
    <div class="pc">
      <span class="ruleDesc" @click="handleOpenRuleDescDialog">规则说明 </span>

      <div class="pcContent">
        <div class="pcContentBox">
          <p>
            盲盒数量<span>{{ inviteInfo.blind_box_num }}</span>
          </p>
          <div
            class="pcContentBoxBtn"
            :class="{ btDisable: inviteInfo.blind_box_num <= 0 || !canClick }"
            @click="openPcBoxPopup"
          >
            <span>开启</span>
          </div>
        </div>
        <div class="pcContentBox">
          <p>
            邀请好友数量<span>{{ inviteInfo.invite_num }}</span>
          </p>
          <div
            class="pcContentBoxBtn"
            @click="openRecordPopup"
            :class="{ btDisable: inviteInfo.invite_num <= 0 }"
          >
            查看
          </div>
        </div>
        <div class="pcInviteCode">
          <vue-qr :text="baseURL" :size="220"></vue-qr>
        </div>
        <p class="pcInviteLink">邀请链接：{{ baseURL }}</p>
        <div
          class="pcInviteBtn"
          v-clipboard:copy="baseURL"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
        >
          点击复制连接
        </div>
      </div>

      <div class="pcPopup" v-if="isShowPcBoxPopup">
        <div class="pcBoxPopupContent" @animationend="pcFirstEnd" @webkitAnimationEnd="pcFirstEnd">
          <img :src="pcClosePopupIcon" class="pcClosePopupIcon" />
        </div>
        <img class="animationImg" :src="animationImg" @dragstart.prevent />
      </div>

      <div class="pcPopup" v-if="isShowPcResultPopup">
        <div class="pcResultPopupContent">
          <p class="pcResultPopupTitle">恭喜获得</p>
          <p class="pcResultPopupName">{{ boxResult.goods_name }}</p>
          <div class="pcResultPopupImage">
            <img :src="boxResult.resultImage" />
          </div>
          <img
            :src="pcClosePopupIcon"
            class="pcClosePopupIcon"
            @click="closePcResultPopup"
            @dragstart.prevent
          />
        </div>
      </div>

      <div class="pcPopup" v-if="isShowPcRecordPopup">
        <div class="recordPopupContent">
          <div class="recordPopupTop">
            <p class="recordPopupTitle">邀请人数</p>
            <img :src="pcRecordPopupClose" class="recordPopupClose" @click="closeRecordPopup" />
          </div>
          <div class="recordPopupCenter">
            <div class="recordPopupItem" v-for="(item, index) in recordPopupList" :key="index">
              <img :src="item.avatar" />
              <p class="recordItemName">{{ item.nickname }}</p>
              <div class="recordItemInfo">
                <p class="recordItemPhone">{{ item.phone }}</p>
                <p class="recordItemTime">{{ item.add_time }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="phone">
      <span class="ruleDesc" @click="gotoRuleDesc"
        >规则说明
        <i class="phone_background_mask"></i>
      </span>

      <div class="phoneContent">
        <div class="phoneContentBox">
          <div class="phoneTitle">
            盲盒数量
            <p>{{ inviteInfo.blind_box_num }}</p>
          </div>
          <div
            class="phoneContentBoxBtn"
            @click="openBoxPopup"
            :class="{ btDisable: inviteInfo.blind_box_num <= 0 || !canClick }"
          >
            <span>开启</span>
          </div>
        </div>
        <div class="phoneContentBox">
          <div class="phoneTitle">
            邀请好友数量
            <p>{{ inviteInfo.invite_num }}</p>
          </div>
          <div
            class="phoneContentBoxBtn"
            @click="goToDetail"
            :class="{ btDisable: inviteInfo.invite_num <= 0 }"
          >
            查看
          </div>
        </div>
        <div class="phoneInviteCode">
          <vue-qr :text="baseURL" :size="440"></vue-qr>
        </div>
        <div class="phoneInviteLinkBox">
          <p class="phoneInviteLink">邀请链接：{{ baseURL }}</p>
          <div
            class="phoneInviteLinkBtn"
            v-clipboard:copy="baseURL"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          ></div>
        </div>
      </div>
      <div class="phoneBottomBtn" @click="openPopupShare">邀请好友</div>

      <div class="phoneBoxPopUp" v-if="isShowBoxPopup" @touchmove.prevent>
        <div class="position">
          <div class="boxPopupContent">
            <p class="boxPopupTitle">当前剩余次数</p>
            <p class="boxPopupCount">{{ inviteInfo.blind_box_num }}</p>
            <div class="boxPopupBtn" @click="openResultPopup">点击开启盲盒</div>
          </div>
          <div class="popupClose">
            <img :src="phoneClosePopupIcon" @click="closeBoxPopup" />
          </div>
          <img class="animationImg" :src="phoneAnmationImg" @dragstart.prevent />
        </div>
      </div>

      <div class="phoneResultPopup" v-if="isShowResultPopup" @touchmove.prevent>
        <div class="resultPopupContent">
          <p class="resultPopupTitle">恭喜获得</p>
          <p class="resultPopupName">{{ boxResult.goods_name }}</p>
          <div class="resultPopupImage">
            <img :src="boxResult.resultImage" />
          </div>
        </div>
        <div class="popupClose">
          <img :src="phoneClosePopupIcon" @click="closeResultPopup" />
        </div>
      </div>

      <van-popup class="phonePopupShare" v-model="isShowShare" position="bottom">
        <div class="phoneShareTop">
          <p class="phoneShareTopTitle">分享到</p>
          <img :src="phoneClose" class="phoneClose" @click="closePopupShare" />
        </div>
        <div class="phoneShareCenter">
          <div class="phoneShareItem" v-for="(item, index) in phoneShareList" :key="index">
            <img class="phoneShareIcon" :src="item.icon" />
            <p class="phoneShareName">{{ item.name }}</p>
          </div>
        </div>
        <div class="phoneShareBottom">
          <div class="phoneShareCancelBtn" @click="closePopupShare">取消</div>
        </div>
      </van-popup>
    </div>

    <el-dialog
      custom-class="ruleDescDialog"
      :visible="isShowRuleDescDialog"
      center
      :before-close="handleCloseRuleDescDialog"
      :show-close="false"
    >
      <div class="dialog_title">
        <img @click="handleCloseRuleDescDialog" src="@/assets/images/pc_black/auth/close.png" />
      </div>

      <div class="dialog_center">
        <div class="notice_title">邀请规则</div>

        <div class="notice_content">
          <p class="first_title">用户邀请新用户即可获得METAUP勋章和盲盒藏品一份</p>

          <ul>
            <li>
              <div class="notice_content_title">盲盒获取条件：</div>
              <div class="notice_content_desc">
                <p>每邀请五人即可获得盲盒藏品一份，</p>
                <p>通过邀请链接首次注册的用户即可获得盲盒藏品一份</p>
              </div>
            </li>

            <li>
              <div class="notice_content_title">勋章获取条件：</div>
              <div class="notice_content_desc">
                <p>灰色勋章：邀请 1 个新人注册并实名成功即可获得</p>
                <p>绿色勋章：邀请 5 个新人注册并实名成功即可获得</p>
                <p>蓝色勋章：邀请 50 个新人注册并实名成功即可获得</p>
                <p>黄色勋章：邀请 100 个新人注册并实名成功即可获得</p>
                <p>彩色勋章：邀请 500 个新人注册并实名成功即可获得</p>
              </div>
            </li>

            <li class="attention">
              注：邀请人数为阶梯累计，达到相关阶梯即可获得，每个用户各类勋章只能获得一次
            </li>

            <li>
              <div class="notice_content_title">勋章权益：</div>
              <div class="notice_content_desc">
                <p>灰色勋章：无空投</p>
                <p>绿色勋章：可获得藏品空投 1 次</p>
                <p>蓝色勋章：可获得藏品空投 1 次</p>
                <p>黄色勋章：可获得藏品空投 2 次</p>
                <p>彩色勋章：可获得藏品空投 4 次</p>
              </div>
            </li>

            <li class="attention">
              注：空投时间以公告时间为准，后续如有新增勋章赋能请以公告为准
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import vueQr from "vue-qr";
import { startBodyMove, stopBodyMove } from "@/utils";
import { mapState } from "vuex";
import { Message } from "element-ui";
import { Toast } from "vant";
import { inviteApi, inviteRecordApi, luckDrawPrizeApi, openprizeApi } from "@/api";
import { iscode } from "@/utils";
export default {
  name: "InviteCode",
  components: { vueQr },
  // 定义属性
  data() {
    return {
      manual: false,
      phoneAnmation: true, //手机是否可以关闭盲盒
      canClick: true,
      isLoad: false, //图片加载
      animationImg: "",
      phoneAnmationImg: "",
      isShowPcRecordPopup: false,
      isShowShare: false,
      baseURL: "",
      // baseURL: "http://192.168.10.5:8080",
      isShowPcBoxPopup: false,
      isShowPcResultPopup: false,
      isShowBoxPopup: false,
      isShowResultPopup: false,
      phoneClosePopupIcon: require("@/assets/images/invite/phoneCodePopupClose.png"),
      phoneClose: require("@/assets/images/invite/phoneClose.png"),
      pcClosePopupIcon: require("@/assets/images/invite/inviteCodePopupClose.png"),
      pcRecordPopupClose: require("@/assets/images/invite/pcClose.png"),
      pcOpenResultPopupId: "",
      phoneShareList: [
        {
          id: 1,
          name: "微信好友",
          icon: require("@/assets/images/invite/phoneWX.png")
        },
        {
          id: 2,
          name: "微信朋友圈",
          icon: require("@/assets/images/invite/phonePyq.png")
        }
      ],
      recordPopupList: [],
      inviteInfo: {},
      boxResult: {},
      // 规则说明弹窗
      isShowRuleDescDialog: false
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(["equipment"])
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //获取权限
    preload() {
      let images = [];
      for (let i = 1; i <= 13; i++) {
        images[i] = new Image();
        images[i].src = require("@/assets/images/invite/animation/" + i + ".png");
        images[i].onload = () => {
          // this.count++;
          // let percentNum = Math.floor((this.count / 306) * 100);
          // if (percentNum >= 100) {
          //   this.isLoad = true;
          // }
        };
        if (i == 13) {
          this.isLoad = true;
        }
      }
      let phoneImages = [];
      for (let j = 1; j <= 17; j++) {
        phoneImages[j] = new Image();
        phoneImages[j].src = require("@/assets/images/invite/animation/phone/" + j + ".png");
        phoneImages[j].onload = () => {};
      }
    },
    pcFirstEnd() {
      setTimeout(() => {
        this.currentImg("pc");
      }, 300);
    },
    currentImg(type) {
      let time = 1;
      if (type == "pc") {
        let id = setInterval(() => {
          if (time < 13) {
            time++;
            this.$nextTick(() => {
              this.animationImg = require("@/assets/images/invite/animation/" + time + ".png");
            });
          } else {
            clearInterval(id);
            this.isShowPcBoxPopup = false;
            this.animationImg = "";
            this.openPcResultPopup();
          }
        }, 120);
      } else {
        let id = setInterval(() => {
          if (time < 17) {
            time++;
            this.$nextTick(() => {
              this.phoneAnmationImg = require("@/assets/images/invite/animation/phone/" +
                time +
                ".png");
            });
          } else {
            clearInterval(id);
            this.phoneAnmationImg = "";
            this.isShowBoxPopup = false;
            this.getInvite();
            this.isShowResultPopup = true;
          }
        }, 120);
      }
    },
    async getInvite() {
      let result = await inviteApi();
      if (iscode(result)) {
        this.inviteInfo = result.result;
        if (this.baseURL.indexOf("#/?inviteCode=") == -1) {
          this.baseURL = this.baseURL + "#/?inviteCode=" + this.inviteInfo.invite_code;
        }
      }
    },
    async inviteRecord() {
      let result = await inviteRecordApi({ page: 1, pagesize: 9999 });
      if (iscode(result)) {
        this.recordPopupList = result.result.list;
        this.recordPopupList.map((item, index) => {
          if (!item.avatar) {
            item.avatar = require("@/assets/images/invite/defaultIcon.png");
          }
          if (!item.nickname) {
            item.nickname = "METAUP";
          }
        });
        this.isShowPcRecordPopup = true;
        stopBodyMove();
      }
    },

    async luckDrawPrize(type) {
      //platform:1pc,2phoen
      let result = await luckDrawPrizeApi({
        platform: type
      });
      if (iscode(result)) {
        setTimeout(() => {
          this.canClick = true;
        }, 500);
        this.boxResult = result.result.order;
        this.$set(this.boxResult, "resultImage", result.result.show_url + this.boxResult.images[0]);
        if (type == 1) {
          this.isShowPcBoxPopup = true;
          stopBodyMove();
        } else {
          this.phoneAnmation = false;

          setTimeout(() => {
            this.currentImg("phone");
          }, 300);
        }
      }
    },
    //复制链接
    onCopy() {
      if (!this.equipment.isPhone) {
        Message({
          message: "复制成功!",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess"
        });
      } else {
        Toast("复制成功!");
      }
    },
    onError() {
      if (!this.equipment.isPhone) {
        Message({
          message: "复制失败请重试",
          iconClass: "myErrorIcon",
          customClass: "myError"
        });
      } else {
        Toast("复制失败请重试");
      }
    },
    //号码保护
    protectNumber(number) {
      if (number.length == 11) {
        let trimNumber = number.replace(/^(.{3}).*(.{4})$/, "$1****$2");
        return trimNumber;
      } else {
        return number;
      }
    },
    //打开邀请记录phone
    goToDetail() {
      if (this.inviteInfo.invite_num > 0) {
        this.$router.push({
          path: "/mail/inviteRecord"
        });
      }
    },
    //打开邀请好友列表pc
    openRecordPopup() {
      if (this.inviteInfo.invite_num > 0) {
        this.inviteRecord();
      }
    },
    //关闭邀请好友列表pc
    closeRecordPopup() {
      this.isShowPcRecordPopup = false;
      startBodyMove();
    },
    //打卡分享好友弹窗phone
    openPopupShare() {
      // if (this.equipment.isWeixin) {
      //   this.isShowShare = true;
      // } else {
      //   this.$router.push("/mail/inviteShare");
      // }
      this.$router.push({
        path: "/mail/inviteShare",
        query: { inviteCode: this.inviteInfo.invite_code }
      });
    },
    //关闭分享好友弹窗phone
    closePopupShare() {
      this.isShowShare = false;
    },
    //开启盲盒弹窗pc
    openPcBoxPopup() {
      if (this.inviteInfo.blind_box_num > 0 && this.canClick) {
        this.canClick = false;
        this.luckDrawPrize(1);
      }
    },
    //关闭盲盒弹窗pc
    closePcBoxPopup() {
      startBodyMove();
      clearInterval(this.pcOpenResultPopupId);
      this.getInvite();
      this.isShowPcBoxPopup = false;
    },
    //打开盲盒结果弹窗pc
    openPcResultPopup() {
      stopBodyMove();
      clearInterval(this.pcOpenResultPopupId);
      this.isShowPcResultPopup = true;
    },
    //关闭盲盒结果弹窗pc
    closePcResultPopup() {
      startBodyMove();
      this.getInvite();
      this.isShowPcResultPopup = false;
    },
    //开启盲盒弹窗phone
    openBoxPopup() {
      if (this.inviteInfo.blind_box_num > 0 && this.canClick) {
        this.isShowBoxPopup = true;
      }
    },
    //关闭盲盒弹窗phone
    closeBoxPopup() {
      if (this.phoneAnmation) {
        this.isShowBoxPopup = false;
      }
    },
    //打开盲盒结果弹窗phone
    openResultPopup() {
      this.luckDrawPrize(2);
    },
    //关闭盲盒结果弹窗phone
    closeResultPopup() {
      // this.getInvite();
      this.phoneAnmation = true;
      this.isShowResultPopup = false;
    },
    // 截取路径
    getBaseUrl() {
      let url = window.location.href;
      if (url.indexOf("?code=") !== -1) {
        this.baseURL = window.location.href.split("?code=")[0];
      } else if (url.indexOf("?merchantId=") !== -1) {
        this.baseURL = window.location.href.split("?merchantId=")[0];
      } else {
        this.baseURL = window.location.href.split("#")[0];
      }
    },
    // 打开规则说明弹窗
    handleOpenRuleDescDialog() {
      this.isShowRuleDescDialog = true;
    },
    // 关闭规则说明弹窗
    handleCloseRuleDescDialog() {
      this.isShowRuleDescDialog = false;
    },

    // ========== goto ==========
    // 跳转到规则说明界面
    gotoRuleDesc() {
      this.$router.push("/ruleDesc");
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.preload();
    this.getBaseUrl();
    this.getInvite();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
    transform: scale(3);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(3);
    transform: scale(3);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@-webkit-keyframes puff-out-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);

    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

.InviteCode {
  margin-top: 30px;
  margin-bottom: 70px;

  p {
    margin: 0;
  }

  .pc {
    position: relative;
    background: url("~@/assets/images/invite/inviteCodeBg.png");
    background-size: 100% 100%;
    width: 900px;
    height: 715px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .ruleDesc {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 16px;
      border-radius: 5px;
      padding: 5px 15px;
      background: url("~@/assets/images/invite/inviteCodeBtn.png");
      background-size: 100% 100%;
      background-position: center center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .pcContent {
      margin-top: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .pcContentBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        p {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 16px;

          span {
            margin-left: 10px;
            font-size: 36px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #00ffb0;
            line-height: 36px;
          }
        }

        .pcContentBoxBtn {
          cursor: pointer;
          width: 70px;
          height: 30px;
          border-radius: 2px;
          border: 1px solid #00ffb0;
          backdrop-filter: blur(3px);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #00ffb0;
          line-height: 14px;
        }

        .btDisable {
          cursor: unset;
          opacity: 0.5;
          user-select: none;
        }
      }

      .pcContentBox:nth-child(2) {
        margin-top: 23px;
      }

      .pcInviteCode {
        margin-top: 34px;
        width: 220px;
        height: 220px;
      }

      .pcInviteLink {
        margin-top: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
      }

      .pcInviteBtn {
        cursor: pointer;
        background: url("~@/assets/images/invite/inviteCodeBtn.png");
        background-size: 100% 100%;
        width: 345px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
        margin-top: 30px;
      }
    }

    .pcPopup {
      position: fixed;
      z-index: 99;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 0 30px;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .pcBoxPopupContent {
        background: url("~@/assets/images/invite/inviteCodePopup.png");
        background-size: 100% 100%;
        width: 800px;
        height: 490px;
        position: relative;
        -webkit-animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
        animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;

        .pcClosePopupIcon {
          cursor: pointer;
          position: absolute;
          z-index: 99;
          top: 30px;
          right: 30px;
          width: 32px;
          height: 32px;
        }
      }

      .animationImg {
        width: 800px;
        position: absolute;
      }

      .pcResultPopupContent {
        background: url("~@/assets/images/invite/inviteCodeResultPopup.png");
        background-size: 100% 100%;
        width: 800px;
        height: 490px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        -webkit-animation: puff-in-center 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both;
        animation: puff-in-center 0.3s cubic-bezier(0.47, 0, 0.745, 0.715) both;

        .pcResultPopupTitle {
          margin-top: 40px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
        }

        .pcResultPopupName {
          margin-top: 15px;
          font-size: 24px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
        }

        .pcResultPopupImage {
          margin-top: 32px;

          img {
            // width: 120px;
            height: 271px;
          }
        }

        .pcClosePopupIcon {
          cursor: pointer;
          position: absolute;
          top: 30px;
          right: 30px;
          width: 32px;
          height: 32px;
        }
      }

      .recordPopupContent {
        width: 800px;
        height: 640px;
        background: #1e2020;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        padding: 30px;
        overflow: scroll;
        position: relative;

        .recordPopupTop {
          display: flex;
          justify-content: space-between;

          .recordPopupTitle {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }

          .recordPopupClose {
            position: absolute;
            cursor: pointer;
            top: 20px;
            right: 20px;
            width: 15px;
            height: 15px;
          }
        }

        .recordPopupCenter {
          margin-top: 30px;

          .recordPopupItem {
            border-bottom: 1px solid #444444;
            display: flex;
            align-items: center;
            padding: 20px 0;

            img {
              width: 60px;
              height: 60px;
              margin-right: 20px;
            }

            .recordItemName {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
            }

            .recordItemInfo {
              margin-left: auto;
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .recordItemPhone {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #ffffff;
              }

              .recordItemTime {
                margin-top: 10px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
              }
            }
          }
        }
      }
    }
  }

  .phone {
    display: none;
  }
}

/deep/.ruleDescDialog {
  position: relative;
  max-width: 688px;
  // min-height: 230px;
  background: #1e2020;
  border-radius: 10px;

  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    margin: 0;
    padding: 0;

    .dialog_title {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      padding: 15px 15px 0 0;

      img {
        width: 13px;
        height: 13px;
        cursor: pointer;
      }
    }
    .dialog_center {
      padding: 15px 15px;

      .notice_title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 20px;
        text-align: center;
      }

      .notice_content {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: #eeeeee;
        margin-top: 25px;
        padding: 0 30px 20px 30px;
        padding-left: 14%;

        ul,
        li {
          margin: 0;
          padding: 0;
          list-style: none;
          margin-top: 30px;
        }
        p,
        div {
          margin: 0;
          padding: 0;
          min-height: unset;
        }

        .first_title,
        .notice_content_title {
          font-size: 16px;
        }

        .notice_content_desc {
          p {
            font-size: 14px;
            margin-top: 5px;
            text-indent: 2em;
          }
        }

        .attention {
          // text-decoration: underline;
          color: #eeeeee;
        }
      }
    }
  }
  .el-dialog__wrapper {
    background: rgba(0, 0, 0, 0.8);
  }
}

@media screen and (max-width: 768px) {
  .InviteCode {
    margin: 0;

    .pc {
      display: none;
    }

    .phone {
      display: block;
      padding: 0 30px;
      background: #1e2020;
      padding-top: 130px;
      position: relative;

      .ruleDesc {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 150px;
        right: 10px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        border-radius: 5px;
        padding: 5px 15px;
        text-align: center;
        z-index: 2;
        width: 50px;
        height: 150px;
        // background: url("~@/assets/images/invite/inviteCodeBtn.png");
        // transform: rotateZ(90deg);
        // background-size: 100% 100%;
        // writing-mode: vertical-lr;
      }
      .phone_background_mask {
        position: absolute;
        right: -50px;
        top: 50px;
        width: 150px;
        height: 50px;
        display: block;
        background: url("~@/assets/images/invite/inviteCodeBtn.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center center;
        transform: rotateZ(90deg);
        z-index: -1;
      }

      .phoneContent {
        background: url("~@/assets/images/invite/phoneCodeBg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 1212px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding: 0 30px;

        .phoneContentBox:first-child {
          margin-top: 330px;
          margin-bottom: 46px;
        }

        .phoneContentBox {
          width: 100%;
          display: flex;
          // align-items: center;
          justify-content: space-between;

          .phoneTitle {
            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: baseline;

            p {
              font-size: 72px;
              font-family: DINAlternate-Bold, DINAlternate;
              font-weight: bold;
              color: #00ffb0;
              margin-left: 20px;
            }
          }

          .phoneContentBoxBtn {
            width: 132px;
            height: 44px;
            border-radius: 4px;
            border: 1px solid #00ffb0;
            backdrop-filter: blur(3px);
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00ffb0;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .btDisable {
            cursor: unset;
            opacity: 0.5;
            user-select: none;
          }
        }

        .phoneInviteCode {
          width: 440px;
          height: 440px;
          margin-top: 120px;
        }

        .phoneInviteLinkBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 450px;
          margin-top: 80px;

          .phoneInviteLink {
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            width: 396px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .phoneInviteLinkBtn {
            background: url("~@/assets/images/invite/phoneCodeCopy.png");
            background-size: 100% 100%;
            width: 28px;
            height: 28px;
          }
        }
      }

      .phoneBottomBtn {
        margin: 60px 0;
        width: 100%;
        height: 100px;
        background: url("~@/assets/images/invite/phoneLongBtn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
      }

      .phoneBoxPopUp {
        position: fixed;
        z-index: 99;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 30px;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .position {
          position: relative;
        }

        .animationImg {
          width: 100%;
          position: absolute;
          top: 0;
        }

        .boxPopupContent {
          background: url("~@/assets/images/invite/phoneCodePopup.png");
          background-size: 100% 100%;
          width: 100%;
          height: 980px;
          display: flex;
          flex-direction: column;
          align-items: center;
          -webkit-animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
          animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;

          .boxPopupTitle {
            margin-top: 704px;
            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
          }

          .boxPopupCount {
            margin-top: 35px;
            font-size: 72px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #00ffb0;
          }

          .boxPopupBtn {
            margin-top: 50px;
            width: 510px;
            height: 72px;
            background: linear-gradient(315deg, #00ffb0 0%, #ff8686 100%);
            font-size: 28px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1e2020;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .popupClose {
          margin-top: 60px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 52px;
            height: 52px;
          }
        }
      }

      .phoneResultPopup {
        position: fixed;
        z-index: 99;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 30px;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .resultPopupContent {
          background: url("~@/assets/images/invite/phoneCodeResultPopup.png");
          background-size: 100% 100%;
          width: 100%;
          height: 980px;
          display: flex;
          flex-direction: column;
          align-items: center;
          -webkit-animation: puff-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
          animation: puff-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

          .resultPopupTitle {
            margin-top: 80px;
            font-size: 32px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
          }

          .resultPopupName {
            margin-top: 26px;
            font-size: 48px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #000000;
          }

          .resultPopupImage {
            margin-top: 62px;

            img {
              height: 543px;
            }
          }
        }

        .popupClose {
          margin-top: 60px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 52px;
            height: 52px;
          }
        }
      }

      .phonePopupShare {
        height: 516px;
        background: #2b2c2d;
        border-radius: 24px 24px 0px 0px;
        padding: 40px;

        .phoneShareTop {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .phoneShareTopTitle {
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
          }

          .phoneClose {
            width: 40px;
            height: 40px;
          }
        }

        .phoneShareCenter {
          margin-top: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          .phoneShareItem {
            display: flex;
            flex-direction: column;
            align-items: center;

            .phoneShareIcon {
              width: 110px;
              height: 110px;
            }

            .phoneShareName {
              margin-top: 16px;
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.87);
            }
          }

          .phoneShareItem:first-child {
            margin-right: 156px;
          }
        }

        .phoneShareBottom {
          margin-top: 60px;
          width: 100%;

          .phoneShareCancelBtn {
            height: 88px;
            background: #444444;
            border-radius: 6px;
            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>

          .phoneShareCancelBtn {
            height: 88px;
            background: #444444;
            border-radius: 6px;
            font-size: 32px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>